/**
 * @author BoLiang
 */
if (typeof accedo === "undefined") {
	accedo = {};
}
if (typeof accedo.achievement === "undefined") {
	accedo.achievement = {};
}

accedo.achievement.achiShow1 = {

	divCurrID : 0,
	divLength : 0, // total number of div
	divManNode : null,
	divTitNode : null,
	divCtnNode : null,
	divMidNode : null,
	divInnNode : null,
	divScrNode : null,
	divBarNode : null,
	moveCount : 0,
	oldOnkeydownFunc : null,
	appSn : null,
	appSnLength : 0,
	appsnArray : null,
	appsnCurr : 0,

	init : function() {
		this.divCurrID = 0;
		this.divLength = 0;
		this.divManNode = null;
		this.divTitNode = null;
		this.divCtnNode = null;
		this.divMidNode = null;
		this.divInnNode = null;
		this.divScrNode = null;
		this.divBarNode = null;
		this.moveCount = 0;
		this.oldOnkeydownFunc = null;
		this.appSn = null;
		this.appSnLength = 0;
		this.userName = null;
		this.appsnArray = new Array();
		this.appsnCurr = 0;
	},

	appendAchiPage : function(username, appsn) {
		this.init();
		this.divTitNode = this.createTitDiv();
		this.divManNode = this.createManDiv(this.divTitNode);
		
		var bodyNode = document.getElementsByTagName("body")[0];
		bodyNode.appendChild(this.divManNode);

		this.initInnerDiv(username, appsn);

		this.oldOnkeydownFunc = document.onkeydown;
		document.onkeydown = function(e) {
			accedo.achievement.achiShow1.keysControl(e);
		};
	},

	removeAchiPage : function() {
		dwr.engine.setPreHook();
		dwr.engine.setPostHook();
		var bodyNode = document.getElementsByTagName("body")[0];
		bodyNode.removeChild(this.divManNode);
		document.onkeydown = this.oldOnkeydownFunc;
	},

	preInitHook : function() {
	},

	postInitHook : function() {
	},

	initInnerDiv : function(username, appsn) {
		dwr.engine.setPreHook(this.preInitHook);
		dwr.engine.setPostHook(this.postInitHook);
		AchiService._path = 'http://127.0.0.1:8080/AchiPlugin/dwr';
		AchiService.getJsonAchisByAppsn(username, appsn,
				this.initInnerDivCallback);

	},

	initInnerDivCallback : function(data) {
		var serverDataObj = eval("(" + data + ")");

		accedo.achievement.achiShow1.divMidNode = accedo.achievement.achiShow1
				.createMidDiv(serverDataObj);
		accedo.achievement.achiShow1.divCtnNode
				.appendChild(accedo.achievement.achiShow1.divMidNode);
		accedo.achievement.achiShow1.divCurrID = 0;
		var divNode = document
				.getElementById(accedo.achievement.achiShow1.divCurrID);
		divNode.style.borderColor = "white";
		divNode.style.backgroundColor = "#FF6600";
	},

	createManDiv : function(tilNode) {
		this.divManNode = document.createElement("div");
		this.divManNode.id = "divAchiShowMain";
		this.divCtnNode = document.createElement("div");
		this.divCtnNode.id = "divAchiShowContainer";
		this.divManNode.appendChild(tilNode);
		this.divManNode.appendChild(this.divCtnNode);

		return this.divManNode;
	},
	createTitDiv : function() {
		this.divTitNode = document.createElement("div");
		this.divTitNode.id = "divAchiShowTitle";
		return this.divTitNode;
	},
	createMidDiv : function(serverDataObj) {
		this.divLength = serverDataObj.achis.length;
		this.divInnNode = document.createElement("div");
		this.divInnNode.id = "divAchiShowInner";
		this.divInnNode.className = "divAchiShowInner";
		this.divInnNode.style.height = (105 * this.divLength) + "px";
		var topInterval = 0;

		// create all of the DIV and append them into div container
		for ( var divNum = 0; divNum < this.divLength; divNum++ ) {
			topInterval = topInterval + 5;
			var divNode = document.createElement("div");
			divNode.id = divNum;
			divNode.className = "divAchiShowCell";
			divNode.style.top = topInterval + "px";

			var divStarNode = document.createElement("div");
			divStarNode.id = "divStar";
			divStarNode.innerHTML = "<img src='http://127.0.0.1:8080/AchiPlugin/achiPlugin/achi-images/achiStar.png' /><input type='hidden' id=hidden"
					+ divNum
					+ " value='"
					+ serverDataObj.achis[divNum].achi_sn
					+ "' />";
			divNode.appendChild(divStarNode);

			var divContNode = document.createElement("div");
			divContNode.id = "divCont";
			divContNode.innerHTML = "<font color='white'>"
					+ serverDataObj.achis[divNum].achi_name + "</font>";
			divNode.appendChild(divContNode);

			var divTickNode = document.createElement("div");
			divTickNode.id = "divTick";
			divTickNode.innerHTML = "<img src='http://127.0.0.1:8080/AchiPlugin/achiPlugin/achi-images/achiTick.png' />";

			if (serverDataObj.achis[divNum].achi_state == "A") {
				divNode.appendChild(divTickNode);
			}

			this.divInnNode.appendChild(divNode);

		}
		// *********************************************
		this.divScrNode = document.createElement("div");
		this.divScrNode.id = "divAchiShowScroll";
		this.divBarNode = document.createElement("div");
		this.divBarNode.id = "divAchiShowScrollBar";
		this.divBarNode.innerHTML = "<img width=100% height=100% src='http://127.0.0.1:8080/AchiPlugin/achiPlugin/achi-images/achiBarFront.png' />";
		this.divBarNode.style.height = ((420 / this.divLength) * 4) + "px";
		this.divScrNode.appendChild(this.divBarNode);

		// *********************************************

		this.divMidNode = document.createElement("div");
		this.divMidNode.className = "divAchiShowMiddle";
		this.divMidNode.appendChild(this.divInnNode);
		this.divMidNode.appendChild(this.divScrNode);

		return this.divMidNode;
	},

	createTitle : function(app_sn) {
		var bodyNode = document.getElementsByTagName("body")[0];

		
		var titleNode = document.getElementById("divTitleNode");
		if (titleNode != null) {
			bodyNode.removeChild(titleNode); 
		}
		var titleNode = document.createElement("div"); 
		titleNode.id = "divTitleNode"; 
		titleNode.innerHTML = "<font size=6px color=white>" + app_sn + "</font>"; 
		bodyNode.appendChild(titleNode); 
	},
	moveCurrDiv : function(direction) {
		var divOldNode = document.getElementById(this.divCurrID);
		if (direction == "down" && this.divCurrID < this.divLength - 1) {
			this.divCurrID = this.divCurrID + 1;
			var divNewNode = document.getElementById(this.divCurrID);
			divOldNode.style.borderColor = "#333333";
			divOldNode.style.backgroundColor = null;

			divNewNode.style.borderColor = "white";
			divNewNode.style.backgroundColor = "#FF6600";

			if (this.moveCount == 3) {
				var topValue = this.divInnNode.offsetTop - 105;
				this.divInnNode.style.top = topValue + "px";

				if (this.divCurrID == this.divLength - 1) {
					var topBarValue = 420 - ((420 / this.divLength) * 4);
					this.divBarNode.style.top = topBarValue + "px";
				} else {
					var topBarValue = this.divBarNode.offsetTop
							+ (420 / this.divLength);
					this.divBarNode.style.top = topBarValue + "px";
				}

			} else {
				this.moveCount++;
			}

		} else if (direction == "up" && this.divCurrID > 0) {
			this.divCurrID = this.divCurrID - 1;
			var divNewNode = document.getElementById(this.divCurrID);
			divOldNode.style.borderColor = "#333333";
			divOldNode.style.backgroundColor = null;
			divNewNode.style.borderColor = "white";
			divNewNode.style.backgroundColor = "#FF6600";

			if (this.moveCount == 0) {
				var topValue = this.divInnNode.offsetTop + 105;
				this.divInnNode.style.top = topValue + "px";

				if (this.divCurrID == 0) {
					this.divBarNode.style.top = "0px";
				} else {
					var topBarValue = this.divBarNode.offsetTop
							- (420 / this.divLength);
					this.divBarNode.style.top = topBarValue + "px";
				}
			} else {
				this.moveCount--;
			}

		} else if (direction == "left") {
			// accedo.achievement.achiRightShow.appendRight();
			// this.divMidNode.className = "moveFromRightShowInner";
			// this.divCtnNode.removeChild(this.divMidNode);
			// alert(this.appsnArray.length);/
			if (this.appsnCurr > 0) {
				this.divCtnNode.removeChild(this.divMidNode);
				this.appsnCurr--;
				this.moveCount = 0;
				this.initInnerDiv(this.userName,
						this.appsnArray[this.appsnCurr]);
				this.createTitle(this.appsnArray[this.appsnCurr]);
			}

		} else if (direction == "right") {
			accedo.achievement.achiRightShow.appendRight();
			// this.divMidNode.className = "moveFromRightShowInner";
			// this.divCtnNode.removeChild(this.divMidNode);
			// alert(this.appsnArray.length);/
			/*if (this.appsnCurr < this.appsnArray.length - 1) {
				this.divCtnNode.removeChild(this.divMidNode);
				this.appsnCurr++;
				this.moveCount = 0;
				this.initInnerDiv(this.userName,
						this.appsnArray[this.appsnCurr]);
				this.createTitle(this.appsnArray[this.appsnCurr]);
			}*/

		}
	},
	keysControl : function(e) {
		e = window.event || e;
		switch (e.keyCode) {
		// left button
		case 37:
			this.moveCurrDiv("left");
			break;
		// up button
		case 38:
			this.moveCurrDiv("up");
			break;
		// right button
		case 39:
			this.moveCurrDiv("right");
			break;
		// down button
		case 40:
			this.moveCurrDiv("down");
			break;

		// enter button
		case 13:
			var hiddenInputNode = document.getElementById("hidden" + this.divCurrID);
			var achiSnValue = hiddenInputNode.getAttribute("value");
			accedo.achievement.achiContShow.openPage(achiSnValue);
			break;
		// esc button
		case 27:
			this.removeAchiPage();
			break;
		default:
			break;
		}
	}

};
